﻿<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<div id="app">

    <font color="black">
        您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--职业分类设置
    </font>
    <br />
    <el-button type="primary" v-on:click="xzOk()">新增</el-button>
    <el-table :data="data" style="width: 100%">
        <el-table-column prop="mfkId" label="职称分类编号" width="180"></el-table-column>
        <el-table-column prop="majorKindName" label="职称分类名称" width="180"></el-table-column>

        <el-table-column label="操作">
            <template #default="scope">

                <el-button size="small"
                           type="danger"
                           v-on:click="handleDelete(scope.row.mfkId)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="TjdialogVisible"
               title="表的添加"
               width="500">
        <span>
            <el-form ref="TjuruleFormRef" :model="Tjuform" :rules="urules" label-width="auto" style="max-width: 600px">
                <el-form-item label="职业分类名称" prop="majorKindName">
                    <el-input v-model="Tjuform.MajorKindName" />
                </el-form-item>
                <el-form-item>
                    <el-button v-on:click="TjdialogVisible = false">取消</el-button>
                    <el-button type="primary" v-on:click="TjOk()">
                        确定
                    </el-button>
                </el-form-item>
            </el-form>
        </span>
    </el-dialog>




</div>
<script type="text/javascript">
    const { createApp, ref, reactive } = Vue
    var app = createApp({
        setup() {

            let m = ref(1);
            let data = ref([]);
            let TjdialogVisible = ref(false);
            const TjuruleFormRef = ref(null);

            const Tjuform = reactive({
                MajorKindName:'',
            })

            //定义
            function fill() {
                axios.get('/Home/SelectCM')
                    .then(res => {
                        //console.info(res)
                        data.value = res.data;
                    })
                    .catch(err => {
                        console.info(res);
                    })
            }



            //删除
            function handleDelete(mfkId) {
                if (confirm("确认删除编号" + mfkId + "吗？")) {
                    axios.delete('/Home/CMDelete/' + mfkId)
                        .then(res => {
                            if (res.data > 0) {
                                // 删除成功后重新填充数据列表
                                alert("删除成功！")
                                fill();
                            } else {
                                console.log("删除失败或未找到匹配项");
                            }
                        })
                        .catch(err => {
                            console.error("删除请求失败", err);
                        });
                }
            }
            //打开添加模态框
            function xzOk() {
                TjdialogVisible.value = true;
            }

            //添加
            function TjOk() {
                TjuruleFormRef.value.validate((valid, fields) => {
                    if (valid) {
                        axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                        axios.post('/Home/CMKAdd', {
                            MajorKindName: Tjuform.MajorKindName,
                        }).then(res => {

                            if (res.data > 0) {
                                alert("添加成功！")
                                fill();
                                TjdialogVisible.value = false;
                                Tjuform.MajorKindName = "";
                               
                            }
                        }).catch(err => {
                            console.log(err);
                        })
                    } else {
                        console.log('error submit!', fields)
                    }
                })
            }



            //调用
            fill();
            return {
                m,
                data,
                handleDelete,
                ref,
                xzOk,
                TjdialogVisible,
                TjuruleFormRef,
                Tjuform,
                TjOk
            }
        }
    });
    app.use(ElementPlus)
    app.mount('#app')

</script>

